<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Regular Weather Report Flat Responsive Widget Template :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Regular Weather Report template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">

    <script src="js/jquery-1.9.1.min.js"></script>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript"
            src="/js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css"
          href="/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="/js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css"
          href="/css/default.css">
    <script type="text/javascript"
            src="/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="/js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript"
            src="/js/easyui/ext/jquery.cookie.js"></script>
    <script
            src="/js/easyui/locale/easyui-lang-zh_CN.js"
            type="text/javascript"></script>
    <script type="text/javascript" src="/js/jquery.ocupload-1.1.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#searchWindow').window("close");
        });

        /**
         * 请求天气图片
         * */
        function getWeatherImg(showId,imgName) {
            $(showId).attr("src", "/pages/weather/images/weather/"+imgName);
        }
        /**
         * 解析json
         * */
        function doShow(data) {
            $('#h_pro').text(data.province);
            $('#h_city').text(data.cityName);
            $('#coldIndex').text(data.coldIndex);
            $('#wearIndex').text(data.wearIndex);
            $('#sportIndex').text(data.sportIndex);
            $('#airIndex').text(data.airIndex);
            $.each(data.weatherGenerics,function(idx,item){
                if(idx==0){
                    $('#h_temperature').text(item.temperature);
                    //$('#h1_tomorrowImg01').val(item.imgName1);
                    getWeatherImg("#h1_tomorrowImg01",item.imgName1);
                    //$('#h1_tomorrowImg02').val(item.imgName2);
                    getWeatherImg("#h1_tomorrowImg02",item.imgName2);
                    $('#dateAndWeather0').text(item.weather);
                    $('#windPower0').text(item.windPower);
                }else if(idx==1){
                    $('#temperature1').text(item.temperature);
                    getWeatherImg("#h1_tomorrowImg11",item.imgName1);
                    getWeatherImg("#h1_tomorrowImg12",item.imgName2);
                    $('#dateAndWeather1').text(item.weather);
                    $('#windPower1').text(item.windPower);
                }else  if(idx==2){
                    $('#temperature2').text(item.temperature);
                    getWeatherImg("#h1_tomorrowImg21",item.imgName1);
                    getWeatherImg("#h1_tomorrowImg22",item.imgName2);
                    $('#dateAndWeather2').text(item.weather);
                    $('#windPower2').text(item.windPower);
                }
            });
            }
        function doSearch(){
            $('#searchWindow').window("open");
            //清空查询条件
            document.getElementById("searchForm").reset();
        }
    </script>

    <script type="text/javascript">
        $(function(){
            //绑定事件
            $("#btnSearch").click(function(){
                    $.ajax({
                        type:"POST",
                        url:"/weather/weatherInfo",
                        dataType: "json",
                        data: $("#searchForm").serialize(),
                        success:function(data,status){
                                $('#searchWindow').window("close");
                                doShow(data);

                        },
                        error:function () {
                            alert("出现异常！");
                        }
                    });
            });
        });
    </script>

    <!-- //js -->
</head>
<body onload="startTime()">
<!-- main -->
<div class="main">
    <div class="main-wthree-row">
        <div class="agileits-top">
            <div class="agileinfo-top-row">
                <div id="touImg" class="agileinfo-top-img">
                    <span> </span>
                </div>
                <h3 id="h_temperature">28°C</h3>
                <p><label id="h_pro">湖南</label>-<label id="h_city">长沙</label></p>
                <br>
                <br>
                <p><a id="btn_search" href="#" class="easyui-linkbutton"
                      data-options="iconCls:'icon-search'">切换城市</a></p>
                <script type="text/javascript">
                    $(function(){
                        $("#btn_search").click(function(){
                            doSearch();
                        });
                    });
                </script>
                <div class="agileinfo-top-time">
                    <div class="date-time">
                        <div class="dmy">
                            <div id="txt"></div>
                            <div class="date">
                                <!-- Date-JavaScript -->
                                <script type="text/javascript">
                                    var mydate = new Date()
                                    var year = mydate.getYear()
                                    if (year < 1000)
                                        year += 1900
                                    var day = mydate.getDay()
                                    var month = mydate.getMonth()
                                    var daym = mydate.getDate()
                                    if (daym < 10)
                                        daym = "0" + daym
                                    var dayarray = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
                                    var montharray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
                                    document.write("" + dayarray[day] + ", " + montharray[month] + " " + daym + ", " + year + "")
                                </script>
                                <!-- //Date-JavaScript -->
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w3ls-bottom">
            <h2>天气详情</h2>
        </div>


        <div>
            <article class="ac-small">
                <div class="wthree-grids">
                    <div class="wthree-grids-row">
                        <ul class="top">
                            <li id="h_tomorrowData" style="text-align:center; font-size:24px">今天</li>
                            <li class="wthree-img"><img id="h1_tomorrowImg01" src="images/2.png" alt=""/></li>
                            <li class="wthree-img"><img id="h1_tomorrowImg02" src="images/2.png" alt=""/></li>
                            <br>
                            <br>
                            <li id="dateAndWeather0" class="wthree-temp">4月21日 小雨转多云</li>
                            <br>
                            <li id="windPower0" class="wthree-temp">西北风3-4级转微风</li>
                            <br>
                            <li id="coldIndex" class="wthree-temp">感冒指数：极易发，强降温，湿度较大，极易感冒。</li>
                            <br>
                            <li id="wearIndex" class="wthree-temp">穿衣指数：较舒适，建议穿薄外套或牛仔裤等服装。</li>
                            <br>
                            <li id="sportIndex" class="wthree-temp">运动指数：较适宜，风力稍强，推荐您进行室内运动。</li>
                            <br>
                            <li id="airIndex" class="wthree-temp">空气污染指数：良，气象条件有利于空气污染物扩散。</li>
                            <br>
                        </ul>
                    </div>
                </div>
            </article>
        </div>
        <div class="w3ls-bottom2">
            <div class="ac-container">
                <input id="ac-1" name="accordion-1" type="checkbox"/>
                <label for="ac-1" class="grid1"> 未来两天天气</label>
                <article class="ac-small">
                    <div class="wthree-grids">
                        <div class="wthree-grids-row">
                            <ul class="top">
                                <li id="h_tomorrowData">- 明天</li>
                                <li class="wthree-img"><img id="h1_tomorrowImg11" src="images/2.png" alt=""/></li>
                                <li class="wthree-img"><img id="h1_tomorrowImg12" src="images/2.png" alt=""/></li>
                                <br>
                                <br>
                                <li id="dateAndWeather1" class="wthree-temp">4月21日 小雨转多云</li>
                                <br>
                                <li id="windPower1" class="wthree-temp">西北风3-4级转微风</li>
                                <br>
                                <li id="temperature1" class="wthree-temp">11℃/16℃</li>
                                <br>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="wthree-grids-row">
                            <ul class="top">
                                <li id="h_tomorrowData">- 后天</li>
                                <li class="wthree-img"><img id="h1_tomorrowImg21" src="images/2.png" alt=""/></li>
                                <li class="wthree-img"><img id="h1_tomorrowImg22" src="images/2.png" alt=""/></li>
                                <br>
                                <br>
                                <li id="dateAndWeather1" class="wthree-temp">4月21日 小雨转多云</li>
                                <br>
                                <li id="windPower1" class="wthree-temp">西北风3-4级转微风</li>
                                <br>
                                <li id="temperature1" class="wthree-temp">11℃/16℃</li>
                                <br>
                            </ul>
                            <div class="clear"></div>
                        </div>

                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<script>
    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML =
            h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
    }
    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }
        ; // add zero in front of numbers < 10
        return i;
    }
</script>



<!-- 查询分区 -->
<div class="easyui-window" title="城市天气查询" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
    <div style="overflow:auto;padding:5px;" border="false">
        <form id="searchForm">
            <table class="table-edit" width="80%" align="center">
                <tr class="title">
                    <td colspan="2">查询条件(请输入城市名称)</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td><input type="text" name="cityName"/></td>
                </tr>

                <tr>
                    <td colspan="2">
                        <a id="btnSearch" href="#" class="easyui-linkbutton"
                           data-options="iconCls:'icon-search'">一键查询</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script type="text/javascript">
        $(function(){
                $.ajax({
                    type:"POST",
                    url:"/weather/weatherInfo",
                    dataType: "json",
                    data: $("#searchForm").serialize(),
                    success:function(data,status){
                        $('#searchWindow').window("close");
                        doShow(data);

                    },
                    error:function () {
                        alert("出现异常！");
                    }
                });
            });
    </script>
</body>
</html>